<template>

    <el-table :data="goodsList" style="width: 100%">

        <el-table-column prop="proid" label="编号" width="180" />
        <el-table-column prop="category" label="分类" width="180" />
        <el-table-column prop="brand" label="品牌" width="180" />
        <el-table-column prop="proname" label="产品名称" width="400" />
    </el-table>

    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script lang="ts" setup>

import { reactive, ref, watch } from 'vue';
import {getGoodsListApi}  from "@/api/pro";
import type { AxiosResponse } from 'axios';

// 当前显示的商品的数据
const goodsList = reactive([]);
// 每页多少条数据
const pageSize = ref(10);
// 当前页码
const currentPage = ref(1);
// 一共多少条：
const total  = ref(0);

watch([currentPage,pageSize],()=>{
    getGoodsList();
},{
    immediate:true
})

// 获取商品的列表数据
function getGoodsList(){
    getGoodsListApi({
        count:currentPage.value,
        limitNum:pageSize.value
    })
    .then((res:AxiosResponse)=>{
        if(res.data.code==="200"){
            goodsList.length = 0;
            goodsList.push(...res.data.data);
            total.value= res.data.total;
        }
    })
}

function handleSizeChange(val:number){
    pageSize.value = val;
}

function handleCurrentChange(val:number){
    currentPage.value = val;
}

</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>